<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动布局</title>
    <style>
      #list {
        background-color: yellow;
        list-style: none;
      }
      .item {
        background-color: skyblue;
        margin: 5px;
        /* float:浮动之后，块元素不再独占一行
        *父元素不再被子元素撑开
        *浮动后会影响后续元素显示，使用后一定要最后一个浮动元素之后清除。
        */
        float: right;

        padding: 5px 8px;
        border-radius: 3px;
      }
      #cleanboth {
        clear: both;
      }
    </style>
  </head>
  <body>
    <!-- 
        清除浮动
        1.最后一个浮动元素之后添加一个空div，clear:both
        2.最后一个浮动元素的父元素添加  
        .clear-fix:after{
            content:"";
            display:block;
            clear:both;
        }
        后缀
     -->
    <ul id="list">
      <li class="item">周一</li>
      <li class="item">周二</li>
      <li class="item">周三</li>
      <li class="item">周四</li>
      <li class="item">周五</li>
      <li class="item">周六</li>
      <li class="item">周七</li>
      <div id="cleanboth"></div>
      <!-- <div>123</div> -->
    </ul>
  </body>
</html>
